import { useIntersectionObserver } from '@vueuse/core'
// import { onMounted } from 'vue-demi'
import defaultImg from '@/assets/images/loading.gif'

export default {
  // 插件方式注册指令
  install (app) {
    app.directive('imgLazy', {
      mounted (el, binding) {
        const { stop } = useIntersectionObserver(
          el,
          ([{ isIntersecting }]) => {
            // console.log('组件被监控了 ', isIntersecting)
            if (isIntersecting) {
              // 没有加载到就显示一个加载效果
              el.src = defaultImg
              // 到可视区再进行渲染
              setTimeout(() => {
                el.src = binding.value
              }, 2000)
              // 如果请求失败
              el.onerror = () => {
                el.src = defaultImg
              }
              // getDataFn()
              // 注意,发送请求后一定要关闭监控, 不然callback会一直执行
              stop()
            }
          },
          {
            threshold: 0 // 加载时机的优化
          }
        )
      }
    })
  }
}
